<template>
    <div class="calendar" @touchstart="start" :style="{transform:`translate3d(${pos.l}px, 0, 0)`,transition:`all ${pos.transitionTime}s`}" @transitionend="trEnd">
        <div class="month" v-for="month,i in months" :style="{left:i*10+'rem'}">
            <p class="total">
                <span class="year_num">{{month.year}}年</span>
                <span class="month_num">{{month.yue}}月</span>
            </p>
            <ul class="week">
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
            </ul>
            <div class="days">
                <template v-for="week in month.weeks">
                    <ul class="row">
                        <li v-for="day in week" :class="inMonth(week,day)">
                            <span class="date">{{day.date}}</span>
                            <span class="lunar">{{setSolar2lunar(day)}}</span>
                        </li>
                    </ul>
                    <!--<b-divide></b-divide>-->
                </template>
            </div>
        </div>
    </div>
</template>
<script src="./calendar.js"></script>
<style lang="scss" scoped src="./calendar.scss"></style>